<template>
  <view>
    <view class="ipt-box c-p15">
      <view v-if="!active" @click="active = true" class="disActive"> 请输入搜索内容 </view>
      <view v-if="active" class="c-flex c-flex-alignCenter">
        <view class="c-flex-1">
          <u-icon name="search" color="#F3651F" size="34"></u-icon>
        </view>
        <view class="c-flex-7">
          <input v-model="search" type="text" style="height: 100rpx;line-height: 100rpx"/>
        </view>
        <view class="c-flex-1 c-text-right">
          <u-icon @click="clear" name="close-circle-fill" color="#aaa" size="34"></u-icon>
        </view>
      </view>
    </view>
    <view v-if="searchList.length > 0" class="searchContent c-p15">
      <view class="search-item" v-for="item in searchList" :key="item" @click="searchClick(item)">
        {{ item }}
      </view>
    </view>
    <view class="c-p15" style="padding-bottom: 230rpx">
      <view class="c-fw600 c-color-000" v-if="goodsList.length > 0">本店推荐</view>
      <view v-for="item in goodsList" :key="item.id" @click="toDeatil(item.id)">
        <view class="c-mt40 c-flex">
          <view class="c-flex-3">
            <image :src="item.pic"></image>
          </view>
          <view class="c-flex-7 c-flex c-flex-column c-flex-between">
            <view class="c-overflow-2 c-color-000 c-fw600 c-mt20">{{ item.name }}</view>
            <!-- <view class="c-color-ccc type" v-html="item.description"></view> -->
            <view class="color-main c-fw600">￥{{ item.price }}</view>
          </view>
        </view>
        <u-divider color="#ccc" :use-slot="false" margin-top="30" half-width="50%"></u-divider>
      </view>
      <view v-if="goodsList.length <= 0">
        <u-empty mode="search"></u-empty>
      </view>
    </view>
    <view class="c-fixed c-bottom-0 c-width-100 c-bg-white" v-if="goodsList.length >= 5">
      <l-button :marginTop="40" text="查看更多" align="left" :more="true" @navTo="seeMore"></l-button>
    </view>
  </view>
</template>
<script>
import lButton from './../../commponents/public/button/SaveButton'
import goods from '@/services/goods'
export default {
  data() {
    return {
      active: false,
      search: '',
      searchList: [],
      goodsList: [],
      searchClickBoo: false
    }
  },
  components: {
    lButton
  },
  watch: {
    search: {
      handler(val) {
        // 这个方法名就是为了输出新值和旧值，只要改变就触发
        if (val.trim() == '') {
          this.goodsList = []
          this.searchList = []
        } else {
          goods
            .list({
              name: this.search
            })
            .then(data => {
              this.goodsList = data.list
              this.searchList = Array.from(new Set(data.list.map(i => i.name)))
              if (this.searchClickBoo) this.searchList = []
              this.searchClickBoo = false
            })
        }
      }
    }
  },
  mounted() {
    this.productList()
  },
  methods: {
    clear() {
      this.active = false
      this.search = ''
    },
    toDeatil(id) {
      wx.navigateTo({
        url: `/pages/productDetails/index?id=${id}`
      })
    },
    searchClick(val) {
      this.search = val
      this.searchClickBoo = true
    },
    productList() {
      this.goodsList = []
    },
    seeMore() {
      wx.navigateTo({
        url: `/pages/productList/index?name=${this.search}`
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.search-item {
  padding: 15rpx 0;
  color: #000;
  font-weight: 500;
}
.searchContent {
  background: #f3f3f3;
}
.disActive {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 30rpx;
  color: #777;
  font-size: 26rpx;
  letter-spacing: 4rpx;
  background: #e5e5e5;
  border-radius: 60rpx;
  margin: 30rpx auto;
}
image {
  width: 180rpx;
  border-radius: 10rpx;
  height: 150rpx;
}
.type {
  font-size: 20rpx;
}
</style>
